<template>
  <div
    style="
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between; 
    ">
    <div class="left">
      <div class="dd">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-submenu index="1">
            <template slot="title">
              <span>调度数据</span>
            </template>
            <!-- <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-3">选项3</el-menu-item> -->
          </el-submenu>
          <el-menu-item index="2">
            <span slot="title">设备数据</span>
          </el-menu-item>
          <el-menu-item index="3">
            <span slot="title">监控数据</span>
          </el-menu-item>
          <el-menu-item index="4">
            <span slot="title">工单数据</span>
          </el-menu-item>
          <el-menu-item index="5">
            <span slot="title">故障数据</span>
          </el-menu-item>
          <el-menu-item index="6">
            <span slot="title">巡视数据</span>
          </el-menu-item>
          <el-menu-item index="7">
            <span slot="title">地理数据</span>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="right">
      <div class="dd">
        <div class="btnList">
          <span style="color: white;"> &nbsp;&nbsp;&nbsp;&nbsp;日期: </span>
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <el-button @click="addData">新增数据</el-button>
          <el-button @click="deleteData">删除数据</el-button>
          <el-button @click="editData">修改数据</el-button>
          <el-button @click="daochu">导出</el-button>
        </div>
        <div>
          <el-table
            ref="multipleTable"
            :data="list"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            @select="select"
          >
            <el-table-column type="selection"> </el-table-column>
            <el-table-column prop="denName" label="设备名称"> </el-table-column>
            <el-table-column prop="momentWater" label="瞬时水量/m³"> </el-table-column>
            <el-table-column
              prop="rName"
              label="真实姓名"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="rTel"
              label="电话"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="rSex"
              label="性别"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="accountstate"
              label="账号状态"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="country"
              label="国籍 "
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="flag"
              label="标识"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
          <MyPagenation
            :currentChange="handleCurrentChange"
            :sizeChange="handleSizeChange"
            :currentPageSync="pageInfo.page"
            :pageSize="pageInfo.size"
            :total="total"
          ></MyPagenation>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "InfoQuery",
  data(){
    return{
      total:100,
      pageInfo: {
        page: 1,
        size: 10,
        search: "",
      },
      list:[
        {
          denName:'asd',
          momentWater:'123',
          rName:'asd',
          rTel:'12345678991',
          rSex:'男',
          accountstate:'0',
          country:'China',
          flag:'',
        }
      ]
    }
  },
  methods:{
    addData(){},
    deleteData(){},
    editData(){},
    daochu(){}
  }
};
</script>

<style scoped lang="less">
@import "../../../assets/style/table.less";
.left {
  width: 13%;
  height: 100%;
  .el-menu {
    width: 100%;
    background-color: transparent;
    font-size: 20px;
  }
}
.right {
  width: 86%;
  height: 100%;
  ::v-deep .el-range-input{
		background-color: #002127;
	}
}
</style>